<template>
  <div class="coupon">
    <a-card :bordered="false" style="border-radius:8px">
      <div>
        <a-card :bordered="false" style="border-radius:8px" :bodyStyle="{padding:0}">
          <div class="topheader">
            <div class="header_left">
              <span class="title" contenteditable>测试</span>
              <span class="status" contenteditable>已结束</span>
              <a-icon type="exclamation-circle" class="icon"/>
              <!--              <span class="lticon icon-jth icon"></span>-->
            </div>
            <div class="header_right">
              <div class="tabbox">
                <div class="tab">
                  <div class="tabtop">使用条件:</div>
                  <div class="tabbot" contenteditable>10.01元</div>
                </div>
                <div class="tab">
                  <div class="tabtop">券面额:</div>
                  <div class="tabbot" contenteditable>10元</div>
                </div>
                <div class="tab">
                  <div class="tabtop">优惠券类型:</div>
                  <div class="tabbot" contenteditable>店铺券</div>
                </div>
                <div class="tab">
                  <div class="tabtop">有效时间:</div>
                  <div class="tabbot" contenteditable>2019-11-10 至 2019-11-30</div>
                </div>
                <div class="tab">
                  <div class="tabtop">数据更新时间:</div>
                  <div class="tabbot" contenteditable>2019-11-30</div>
                </div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card :bordered="false" style="border-radius:8px;margin-top: 10px;f" :bodyStyle="{padding:0}">
          <div class="coudate">
            <div class="title">
              模板累积效果<a-icon type="question-circle" class="icon"/>
            </div>
            <div class="databox">
              <div class="coutab">
                <div class="titlet">发行张数</div>
                <div class="datainfo" contenteditable>10,000
                </div>
              </div>
              <div class="coutab">
                <div class="titlet">累计领取张数</div>
                <div class="datainfo" contenteditable>2,563
                </div>
              </div>
              <div class="coutab">
                <div class="titlet">累计使用张数</div>
                <div class="datainfo" contenteditable>1,210
                </div>
              </div>
              <div class="coutab">
                <div class="titlet">累计使用率 <span class="lticon icon-wenhao icon"></span></div>
                <div class="datainfo" contenteditable>47.21%
                </div>
              </div>
              <div class="coutab">
                <div class="titlet">累计支付件数</div>
                <div class="datainfo" contenteditable>1,252
                </div>
              </div>
              <div class="coutab">
                <div class="titlet">累计支付金额</div>
                <div class="datainfo" contenteditable>36,423.68
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </a-card>
  </div>
</template>
<script>
  import countTo from 'vue-count-to'

  export default {
    name: 'Coupon',
    components: {
      countTo
    },
    data () {
      return {
        startVal: 0
      }
    },
    computed: {},
    created () {

    },
    mounted () {

    },
    methods: {}
  }
</script>
<style lang='less' scoped>
  .coupon {
    font-size: 12px;
    .topheader{
      width: 1000px;
      height: 100px;
      box-shadow: 0 2px 7px 1px rgba(0,0,0,10%);
      border: 1px solid #ebeef5;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header_left{
        font-size: 12px;
        .title{
          padding: 0 30px;
        }
        .status{
          background: #FF9E6D;
          border-radius: 4px;
          color: white;
          padding: 0 2px;
        }
        .icon{
          margin-left: 10px;
        }
      }
      .header_right {
        font-size: 12px;
        .tabbox{
          display: flex;

          .tab{
            padding: 0 40px 0 35px;
            border-right: 1px solid #e2e2e9;
            .tabtop{
              color: #C3C3C4;
            }
            .tabbot{
              color: #333333;
            }
          }
        }
      }

      }
    .coudate{
      width: 1000px;
      box-shadow: 0 2px 7px 1px rgba(0,0,0,10%);
      border: 1px solid #ebeef5;
      border-radius: 4px;
      .title{
        height: 70px;
        line-height: 70px;
        padding: 0 30px;
        color: #333333;
        font-weight: 600;
        font-size: 18px;
        border-bottom: 1px solid #d9d9d9;
        .icon{
          font-size: 12px;
          margin-left: 10px;
        }
      }
      .databox{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding: 20px 30px;
        .coutab{
          width: 20%;
          margin-bottom: 40px;
          .titlet{
          font-size: 16px;
          color: #333333;
          /*font-weight: 600;*/
            .icon{
              color: #D7D8D9;
            }
          }
          .datainfo {
            font-size: 28px;
            color: #101010;
            /*font-weight: ;*/
          }
        }
      }
    }
  }
</style>
